<template>
  <div class="search-item">
    <div class="search-item-top">
      <div class="name">
        <a :href="`/#/article/${id}`" v-html="name" class="regular-link">
        </a>
      </div>
      <div class="date">{{date}}</div>
    </div>
    <div class="authors">
      <div class="author" v-for="item in authors" :key="item.authorId" :title="item.name" >
        <author :author="item"></author>
      </div>
    </div>
    <div class="publication">
      <p>
        {{publication}}
      </p>
    </div>
    <div class="abstract">
      <p v-html="abstract">
      </p>
    </div>
    <div class="bottom">
      <div class="hot">
        <hot-level :hot-level="hot_level"></hot-level>
      </div>
      <div :style="{ color: sourceColor }">
        {{source}}
      </div>      
      <a :href="`/#/article/${id}`" class="detail">Detail</a>
    </div>
  </div>
</template>

<script>
import "@/assets/icons/hot.svg";
import Author from '@/components/Pieces/Author/AuthorItem';
import HotLevel from '@/components/Pieces/HotLevel/index';

export default {
  name: "SearchItem",
  props: {
    msg: {
      title: String,
      authors: Array,
      publication: Object,
      abstract: String,
      hot_level: Number,
      id: Number,
      date: Number,
      source: String
    }
  },
  data() {
    return {
      sourceColor: 'red'
    };
  },
  computed: {
    name() {
      return this.msg?.title;
    },
    authors() {
      return this.msg?.authors.slice(0, 4);
    },
    publication() {
      return this.msg?.publication?.name;
    },
    abstract() {
      return this.msg?.abstract;
    },
    hot_level() {
      return this.msg?.hot_level;
    },
    id() {
      return this.msg?.id;
    },
    date() {
      return this.msg?.date;
    },
    source() {
      if (this.msg?.source == 'IEEE') {
        this.sourceColor = 'dodgerblue';
      }
      else if (this.msg?.source == 'ACM') {
        this.sourceColor = 'palevioletred';
      }
      else {
        this.sourceColor = 'black';
      }
      return this.msg?.source;
    },
  },
  created() {

  },
  mounted() {

  },
  watch: {

  },
  methods: {

  },
  components: {
    Author,
    HotLevel
  },
};
</script>

<style scoped lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@1,300&display=swap');

.search-item {
  background-color: rgba(245, 245, 245, 0.3);
  box-shadow: 0 5px 8px rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;
  padding: 10px 20px;

  & > div {
    margin-bottom: 6px;
  }

  .search-item-top {
    .name {
      a {
        color: #0077c2;
        font-size: 1.4em;
      }
    }

    .date {
      font-size: 14px;
      float: right;
    }
    margin-bottom: 0;
  }

  .authors {
    display: flex;
    flex-wrap: wrap;

    .author {
      display: flex;
      align-items: center;
      margin-right: 9px;
    }
  }

  .publication {
    font-family: 'Nunito', sans-serif;
  }

  .abstract {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
  }

  .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .source-blue {
      color: dodgerblue;
    }
    .source-purple {
      color: palevioletred;
    }

    .detail {
      padding: 10px 20px;
      color: white;
      background: #5AAB00;
      padding: 7px 22px 8px 23px;
      border-radius: 2px;
    }
  }

}
</style>
